<!--
 * @Author: Mcc
 * @Date: 2024-07-29 10:17:14
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-21 10:16:09
 * @FilePath: \ft-apply-admin\src\components\SimpleMenu\src\SimpleSubMenu.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<script lang="ts" setup>
  import {computed, onMounted, onUnmounted, onUpdated, onBeforeMount, ref, watch} from 'vue'
import MenuItem from './components/MenuItem.vue'
import SubMenu from './components/SubMenuItem.vue'
import type { Menu } from '@/router/types'
import { useDesign } from '@/hooks/web/useDesign'
import { Icon } from '@/components/Icon'

import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
import { useRouter,useRoute } from 'vue-router';
import { useUserStore } from '@/store/modules/user'
import {comStores} from "@/store/common/comStore";
const store = comStores()
const userStore = useUserStore()
import { getCount } from '@/api/applay/side/side'
  import {nextTick} from "@vue/runtime-core";
defineOptions({ name: 'SimpleSubMenu' })

const props = defineProps({
  item: {
    type: Object as PropType<Menu>,
    default: () => ({}),
  },
  parent: propTypes.bool,
  collapsedShowTitle: propTypes.bool,
  collapse: propTypes.bool,
  theme: propTypes.oneOf(['dark', 'light']),
  menuCountList: {
    type: Array,
    default: () => []
  }
})

const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'))

const { t } = useI18n()
const { prefixCls } = useDesign('simple-menu')

const getShowMenu = computed(() => !props.item?.meta?.hideMenu)
const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon))
const getImg = computed(() => props.item?.img)

const getShowSubTitle = computed(() => !props.collapse || !props.parent)
const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent)
const getLevelClass = computed(() => {
  return [
    {
      [`${prefixCls}__parent`]: props.parent,
      [`${prefixCls}__children`]: !props.parent,
    },
  ]
})
function menuHasChildren(menuTreeItem: Menu): boolean {
  return (
    !menuTreeItem.meta?.hideChildrenInMenu
    && Reflect.has(menuTreeItem, 'children')
    && !!menuTreeItem.children
    && menuTreeItem.children.length > 0
  )
}


//声明这个参数
const getI18nName = ref();
//声明list通过接口获取数据参数，进行匹配
const list =ref();
const getData = ref(false);
//调用接口
const getDatas = async()=>{
  const count = store.menuCountList
  list.value ={
    "applicationLists": count.total,//应聘列表
    "ypall": count.total,//应聘列表-全部
    "jl": count.resumeLinkCount,//应聘列表-简历
    "jldsx": count.resumeWaitCount,//应聘列表-简历待筛选
    "jltt": count.resumeOutCount,//应聘列表-简历淘汰
    "ms": count.faceLinkCount,//应聘列表-面试
    "msdym": count.faceAgreeCount,//应聘列表-面试带约面
    "msdms": count.faceWaitCount,//应聘列表-面试待面试
    "mstt": count.faceOutCount,//应聘列表-面试淘汰
    "msfq": count.faceAbandonCount,//应聘列表-面试放弃
    "px": count.trainLinkCount,//应聘列表-培训
    "pxdy": count.trainAgreeCount,//应聘列表-培训待约
    "pxdp": count.trainWaitCount,//应聘列表-培训待培
    "pxpxz": count.trainHaveCount,//应聘列表-培训培训中
    "pxdlq": count.trainWaitEnterCount,//应聘列表-培训待录取
    "pxtt": count.trainOutCount,//应聘列表-培训淘汰
    "pxfq": count.trainAbandonCount,//应聘列表-培训放弃
    "qy": count.signLinkCount,//应聘列表-签约
    "qydqyy": count.signAgreementCount,//应聘列表-签约待签应约
    "qydqsf": count.signContractCount,//应聘列表-签约代签第三方
    "qyfq": count.signAbandonCount,//应聘列表-签约放弃
    "rz": count.entryLinkCount,//应聘列表-入职
    "rzdrz": count.entryWaitCount,//应聘列表-待入职
    "rzsxz": count.entryPracticeCount,//应聘列表-实习中
    "rzsyq": count.entryTryCount,//应聘列表-试用期
    "rzyzz":count.entryRegularCount,//应聘列表-已转正
    "rzjy": count.entryCancelCount,//应聘列表-解约
    "rzqt": count.entryOutCount,//应聘列表-劝退
    "rzlz": count.entryDepartCount,//应聘列表-离职
    "trainList": count.trainNumCount,//培训列表
    "pxall": count.trainNumCount,//培训列表-全部
    "pxwks": count.trainNumStartCount,//培训列表-未开始
    "pxing": count.trainNumHaveCount,//培训列表-培训中
    "pxkhz": count.trainNumExamCount,//培训列表-考核中
    "pxyjs": count.trainNumEndCount,//培训列表-已结束
    };
  if (list.value.applicationLists !== undefined) {
    getI18nName.value = computed(() => getIndex(props.item));
  }
}
//getDatas();

watch(
  () => store.menuCountList,
  () => {
    getDatas();
  },
  { immediate: true },
)

const getIndex =(item)=>{
  const datas = item.meta?.datas;
  const showName = item.name;
  const specialNames = [
  "applicationLists",
  "ypall",
  "jl",
  "jldsx",
  "jltt",
  "ms",
  "msdym",
  "msdms",
  "mstt",
  "msfq",
  "px",
  "pxdy",
  "pxdp",
  "pxpxz",
  "pxdlq",
  "pxtt",
  "pxfq",
  "qy",
  "qydqyy",
  "qydqsf",
  "qyfq",
  "rz",
  "rzdrz",
  "rzsxz",
  "rzsyq",
  "rzyzz",
  "rzjy",
  "rzqt",
  "rzlz",
  "trainList",
  "pxall",
  "pxwks",
  "pxing",
  "pxkhz",
  "pxyjs"
  ];
  if (specialNames.includes(datas)) {
    //证明这几个都是有内部数据的要循环children
    // 检查 list 是否包含对应的名称 获取第一层的代码
    if(item.children!=undefined){
      let selfName = '';
      selfName =`${item.title}(${list.value[datas]})`;
      item.name = selfName;
      item.children.forEach((ele)=>{
        if(specialNames.includes(ele.meta.datas)){
          //为了防止名字重复需要从第二级进行获取
          ele.name = `${ele.title}(${list.value[ele.meta.datas]})`;
        }
      })
      return `${selfName}`;
    }
  }
  return showName;
}
/*watch(
  () => props.item.meta?.datas,
  () => {
    getI18nName.value = computed(() => getIndex(props.item));
  },
  { immediate: true },
)*/
// 获取当前的路由对象
const route = useRoute();
// 数据更新后执行
onUpdated(() => {
  //getI18nName.value = computed(() => getIndex(props.item));
});
</script>

<template>
  <MenuItem v-if="!menuHasChildren(item) && getShowMenu" :name="item.path" v-bind="$props" :class="[getLevelClass, { 'miniIcon': !getShowSubTitle, 'bigIcon': getShowSubTitle }]" >
    <img v-if="getImg" :src="getImg" class="h-16px w-16px align-top">
      <Icon v-if="getIcon" :icon="getIcon" :size="24"/>
      <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-1">
        {{ getI18nName?.value }}
      </div>
      <template #title>
        <div>
          <span class="ml-2" :class="[`${prefixCls}-sub-title`]">
            {{ getI18nName?.value }}
          </span>
          <!-- <span ref="sidebarRef" class="showsId">{{list[item.name]}}</span> -->
          <SimpleMenuTag :item="item" :collapse-parent="getIsCollapseParent" />
        </div>
      </template>
  </MenuItem>
  <SubMenu
    v-if="menuHasChildren(item) && getShowMenu"
    :name="item.path"
    :class="[getLevelClass, theme]"
    :collapsed-show-title="collapsedShowTitle"
  >
    <template #title>
      <div>
        <img v-if="getImg" :src="getImg" class="h-16px w-16px align-top">
        <Icon v-if="getIcon" :icon="getIcon" :size="24" />

        <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-2">
          {{ getI18nName?.value }}
        </div>

        <span v-show="getShowSubTitle" class="ml-2" :class="[`${prefixCls}-sub-title`]">
          {{ getI18nName?.value }}
        </span>
      </div>
      <SimpleMenuTag :item="item" :collapse-parent="!!collapse && !!parent" />
    </template>
    <template v-for="childrenItem in item.children || []" :key="childrenItem.paramPath || childrenItem.path">
      <SimpleSubMenu v-bind="$props" :item="childrenItem" :parent="false" />
    </template>
  </SubMenu>
</template>
